<template>
  <div class="focus_page">
    <!-- 导航 开始 -->
    <nav-bar title="我的关注"></nav-bar>
    <!-- 导航 end -->

    <!-- 列表区域 开始 -->
    <div class="list_box" v-if="list && list.length">
      <template v-for="(item, index) in list">
        <FocusDoctor
          class="show_line"
          v-if="item.followedType == 2"
          :key="`doctor_${index}`"
          :info="item.doctor"
        >
          <div
            class="focus_button"
            slot="button"
            @click.stop="takeOff(item.doctor.id, 'doctor')"
          >
            取关
          </div>
        </FocusDoctor>

        <HospitalTwo
          class="show_line"
          v-if="item.followedType == 1"
          :key="`hospital_${index}`"
          :info="item.hospital"
        >
          <div
            class="focus_button"
            slot="button"
            @click.stop="takeOff(item.hospital.id, 'hospital')"
          >
            取关
          </div>
        </HospitalTwo>
      </template>
      <div class="no_more">
        <van-divider>没有更多了</van-divider>
      </div>
    </div>
    <div class="list_box" v-else>
      <no-data></no-data>
    </div>
    <!-- 列表区域 end -->
  </div>
</template>
<script>
import FocusDoctor from "@/components/doctor/focus_doctor.vue";
import HospitalTwo from "@/components/hospital/hospital_two.vue";
import { Divider } from "vant";
import {
  GET_PERSONAL_MYFOLLOWED,
  FOLLOWED_HOSPITAL_INFO,
  FOLLOWED_DOCTOR_INFO,
} from "@/http/interface";
import { showModal, showToast } from "@/utils/utils";
export default {
  components: {
    FocusDoctor,
    HospitalTwo,
    [Divider.name]: Divider,
  },
  data() {
    return {
      list: [],
    };
  },
  // async asyncData({ $axios }) {
  //   let res = await $axios.get(GET_PERSONAL_MYFOLLOWED);
  //   let list = res.data || [];
  //   return { list };
  // },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    async getList() {
      let res = await this.$axios.get(GET_PERSONAL_MYFOLLOWED);
      this.list = res.data || [];
    },

    // 取关
    takeOff(id, type) {
      let _this = this;
      let ajaxurl = FOLLOWED_HOSPITAL_INFO;
      let params = { id: id };

      if (type == "doctor") {
        ajaxurl = FOLLOWED_DOCTOR_INFO;
      }

      showModal({
        message: "确定取消关注吗？",
        showCancelButton: true,
        beforeClose: function (done) {
          _this.attention(ajaxurl, params);
          if(done){
            done()
          }
        },
      });
    },

    //
    async attention(ajaxurl, params) {
      let res = await this.$axios.get(ajaxurl, {
        params: params,
      });
      if (res.code == 200) {
        showToast({
          message: "操作成功",
          type: "success",
        });
        this.getList();
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/my/focus.less";
</style>